<template>
		
		<van-nav-bar title="标题" left-text="返回" left-arrow :fixed='true' :placeholder='true'  > 
			
			<template #left>
			  <van-icon name="./images/recha.png" size="25" color="#fff"/>
			  <span>茶七网</span>
			</template>
			
			<template #title>
			  <van-search v-model="value" placeholder="请输入搜索关键词" background="#A32F2A" shape="round"  @focus='search()'/>
			</template>
			
		  <template #right>
		    <van-icon name="service-o" size="18" color="#fff" />
		  </template>
		  
		</van-nav-bar>
		
	
</template>

<script>
	export default {
	  data() {
	    return {
	      value: '',
	    };
	  },
	  methods: {
		  search() {
			  this.$router.push('/search')
		  }
	  }
	};
</script>

<style scoped>
	::v-deep .van-nav-bar {
		background-color: #A32F2A;
	}
	.van-search {
		height: 30px;
		margin-left: 1.0625rem;
	}
	.van-icon {
		color: #000000;
	}
	span {
		color: #FFFFFF;
		font-family: "楷体";
		font-weight: 700;
		font-size: 0.9375rem;
		line-height: 2.875rem;
	}
	.van-nav-bar .van-icon{
		color: #FFF;
	}
	::v-deep .van-icon-search{
	    color: #222;
	}
	::v-deep  .van-icon-clear{
		color: #222;
	}
</style>
